<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../sass/index.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../jquery-ui-1.10.2/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../jquery-ui-1.10.2/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="../iconfunt/iconfont.css">
    <link rel="stylesheet" href="../css/detailsmusic.css">
    <link rel="stylesheet" href="../css/styles.css">
    <script src="../jquery-ui-1.10.2/jquery-1.9.1.js"></script>
    <script src="../jquery-ui-1.10.2/ui/jquery-ui.js"></script>
    <script src="../js/jquery-1.11.3.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #banner {

            height: 500px;
            width: 500px;
            overflow: hidden;
            position: relative;
        }

        .imgbox {
            width: 400px;
            height: 400px;
            position: relative;
            font-size: 0;
            overflow: hidden;

        }

        img {
            width: 100%;
            height: 100%;
            /* float: left; */
            position: absolute;

        }

        .rimg {
            margin-left: 100%;
        }

        .limg {
            margin-left: -100%;
        }

        button {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #ccc;
            cursor: pointer;
            color: white;
            font-size: 14px;
            border: none;
            outline: 0;
            opacity: 0.3;
        }

        .logout {
            display: none;
        }

        button:hover {
            opacity: 0.5;
        }

        button:active {
            opacity: 0.9;
        }

        .after {
            position: absolute;
            top: 31%;
            right: 157px;
            margin-top: -15px;
            margin-right: -35px;
        }

        .before {
            position: absolute;
            top: 44%;
            left: 58px;
            margin-top: -75px;
            margin-left: -35px;
        }

        .ul {
            margin: 20px;
        }

        .ul>li {
            display: inline-block;
            width: 50px;
            height: 50px;
            cursor: pointer;
            outline: 0;
        }

        #banner>ul>li>img {
            display: block;
            position: static;
        }

        .ul>li.active {
            border: 1px solid #666;
        }

        #mate {
            display: flex;
            justify-content: center;
            margin: 50px auto;
        }

        form {
            display: flex;
            align-items: center;
        }

        #counts {
            display: flex;
        }

        #count {
            display: block;
            width: 52px;
            line-height: 28px;
            text-align: center;
        }

        #counts>h6 {
            background: rgb(211, 207, 207);
            font-size: 20px;
            width: 40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }

        #counts>h6:hover {
            background: rgb(170, 169, 169);
        }

        #counts>h6:active {
            background: rgb(122, 121, 121);
        }

        .but {
            display: block;
            width: 150px;
            height: 40px;
            text-align: center;
            border-radius: 5px;
            color: #fff;
            opacity: 0.8;

        }

        .jiache {

            margin: 0 10px;
            background: rgb(231, 76, 19);
        }

        div,
        h4,
        h5 {
            margin: 10px;
            list-style: none;
            font-weight: 500;
            cursor: pointer;
        }

        .buy {
            background: crimson;
            line-height: 40px;
            text-decoration: none;
        }

        span {
            margin: 0 5px;
            cursor: pointer;
            text-align: center;
            font-size: 14px;
            line-height: 30px;

        }

        span.active {
            border: 1px solid red;
        }

        #money {
            background: #eee;

        }

        #money>span:nth-child(1) {
            color: red;
            font-size: 20px;
        }

        #money>span:nth-child(3) {
            color: rgb(233, 30, 30);
            font-size: 14px;
            border: 1px solid rgb(233, 30, 30);
        }

        p {
            padding-left: 6px;
            margin: 10px 0;
        }

        h3>span {
            font-size: 25px;
        }

        .check>span {
            color: crimson;
        }

        body {
            background: #fff;
        }
    </style>

</head>

<body>
    <nav>
        <div class="banxin">
            <main class="s-sub">
                <ul>
                    <li><a href="http://172.168.20.103/HUAWEI/ALL/index.html">首页</a></li>
                    <li><a href="#">华为官网</a></li>
                    <li><a href="">花粉俱乐部</a></li>
                    <li><a href="">V码(优购码)</a></li>
                    <li><a href="#">企业购</a></li>
                    <li><a href="#">Select Regjon</a></li>
                    <li class="gdjc"><a href="#">更多精彩</a></li>
                </ul>
            </main>
            <main class="s-main">
                <li><a href="logon.html">请登录</a></li>
                <li class="logout"><a
                        href="javascript:document.cookie='phone=;expires=Thu, 01 Jan 1970 00:00:00 UTC;';location='index.html'">退出登录</a>
                </li>
                <li><a href="parking.html">注册</a></li>
                <li><a href="">我的订单</a></li>
                <li class="s-main-lis"><a href="#">客户服务
                        <ul>
                            <li>服务中心</li>
                            <li>联系客服</li>
                        </ul>
                    </a></li>
                <li class="s-main-lis2"><a href="">网站导航
                        <!-- <div class="div1">
                    <article>
                        
                    </article>
                    <article></article>
                    <article></article>
                    <article></article>
                    <article></article>
                </div> -->
                    </a></li>
                <li><a href="">手机导航</a></li>
                <li><a href="http://172.168.20.103/HUAWEI/ALL/shopcart.html">购物车<i class="CART">(0)</i></a></li>

            </main>
        </div>
    </nav>


    <div id="mate">
        <div id="banner">
            <div class="imgbox"></div>
            <button class="after">&gt;</button>
            <button class="before">&lt;</button>
            <ul class="ul">
                <li class="active" jishu="0"></li>
                <li jishu="1"></li>
                <li jishu="2"></li>
                <li jishu="3"></li>
                <li jishu="4"></li>
                <li jishu="5"></li>
            </ul>
        </div>



        <div id="con">
            <h3>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </h3>
            <p>麒麟9000 5G旗舰SoC芯片，支持双模SA/NSA；超感光徕卡电影四摄；超曲面OLED环幕屏；40W有线与27W无线双超级快充；3D面容支付与屏内指纹识别</p>
            <div id="money">
                价格：<span>&nbsp;&nbsp;</span><br>
                促销：<span>&nbsp;&nbsp;赠送积分</span>购买即赠商城积分，积分可抵现~

            </div>
            <h5>服务说明&nbsp;&nbsp;
                <span><i></i>已满48元已免运费&nbsp;&nbsp;&nbsp;&nbsp;</span><span><i></i>由华为商城提供商品、发货开票及售后服务</span></h5>
            <h4>商品编码 &nbsp;&nbsp; <span>2601010161207</span></h4>
            <hr>
            <div classnbsp class="color">选择颜色 &nbsp;&nbsp; <span class="active"></span><span></span><span></span></div>
            <div class="ram">选择版本 &nbsp;&nbsp; <span class="active"></span><span></span><span></span></div>
            <div class="taocan">选择套餐 &nbsp;&nbsp; <span class="active"></span></div>
            <div class="check">已选商品：&nbsp;
                <span></span>
                <span></span>
                <span></span>
            </div>

            <form action="http://172.168.20.103/HUAWEI/ALL/allphp.php" method="GET">
                <input type="hidden" name="phone" value="4">
                <input type="hidden" name="money" value="4">
                <input type="hidden" name="color" value="1">
                <input type="hidden" name="ram" value="2">
                <input type="hidden" name="taocan" value="3">
                <input type="hidden" name="img" value="1">
                <input type="hidden" name="count" value="1">
                <input type="hidden" name="people" value="1">
                <input type="hidden" name="jieshao" value="麒麟9000 5G旗舰SoC芯片，支持双模SA/NSA；超感光徕卡电影四摄；超曲面OLED环幕屏；40W有线与27W无线双超级快充；3D面容支付与屏内指纹识别">
                <input type="hidden" name="hide" value="shopcart">
                <div id="counts">
                    <h6 class="jian">-</h6><input readonly="readonly" id="count" name="count" value="1" />
                    <h6 class="jia">+</h6>
                </div>
                <button class="but jiache">加入购物车</button>
                <a href="jiesuan.html" class="but buy">立即下单<a>
            </form>



        </div>
    </div>

   


    <script>
        if (document.cookie.split("=").length == 2) {
            var str = document.cookie.split("=")[1];
            str = str.replace(/^(\d{3})(\d{6})(\d{2})$/, (a, b, c, d) => {
                return b + "******" + d
            })
            $("[href='logon.html']").html(str);
            $("[href='logon.html']").attr("href", "#");
            $(".logout").css("display", "inline");
            $("[href='parking.html']").css("display", "none");
        }
    </script>
    <script src="../js/shopcart.js"></script>
    <script>
        var people = document.cookie.split("=")[1];
        var b = 0;
        $.ajax({
            url: "http://172.168.20.103/HUAWEI/ALL/allphp.php",
            data: "hide=cartplease&people=" + people,
            dataType: "JSONP",
            success: data => {
                data.forEach((val) => {
                    if (val.peoplenum == people) {
                        b++;  
                    }
                })
                $(".CART").html(`(${b})`);
            }
        })

    </script>
    







</body>

</html>